<template>
    <el-form-item
        class="widget-view"
        :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
        :label="element.options.label"
        :style="{
            marginLeft: element.options.marginLeft+'px',
            marginRight: element.options.marginRight+'px',
            marginTop: element.options.marginTop+'px',
            marginBottom: element.options.marginBottom+'px',
            paddingLeft: element.options.paddingLeft+'px',
            paddingRight: element.options.paddingRight+'px',
            paddingTop: element.options.paddingTop+'px',
            paddingBottom: element.options.paddingBottom+'px',
            background: element.options.background
        }"
    >
        <component :is="element.type" :data="element"/>

        <el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWidget.key == element.key" circle plain type="danger">
            <i class="iconfont2 icon-trash"/>
        </el-button>
        <el-button title="复制" @click.stop="handleWidgetClone(index)" class="widget-action-clone" v-if="selectWidget.key == element.key" circle plain type="primary">
            <i class="iconfont2 icon-icon_clone"/>
        </el-button>

    </el-form-item>
</template>

<script>
import Template from './template'
import deepClone from '@/utils/deepClone'
export default {
    components: {
        ...Template
    },
    props: ['element', 'select', 'index', 'fIndex', 'data', 'isGrid'],
    data() {
        return {
            selectWidget: this.select
        }
    },
    watch: {
        select(val) {
            this.selectWidget = val
        },
        selectWidget: {
            handler(val) {
                this.$emit('update:select', val)
            },
            deep: true
        }
    },
    mounted() {

    },
    methods: {
        goLink(type, url, query) {
            if (type === 'inline') {
                const param = query ? JSON.parse(query.replace(/'/g, '"')) : null
                this.gotoMyehrPath(url, param)
            } else {
                window.open(url)
            }
        },
        handleSelectWidget(index) {
            this.selectWidget = this.data.list[index]
        },
        handleWidgetDelete(index) {
            if (this.isGrid) {
                if (this.data.list[this.fIndex].list.length - 1 === index) {
                    if (index === 0) {
                        this.selectWidget = {}
                    } else {
                        this.selectWidget = this.data.list[this.fIndex].list[index - 1]
                    }
                } else {
                    this.selectWidget = this.data.list[this.fIndex].list[index + 1]
                }

                this.$nextTick(() => {
                    this.data.list[this.fIndex].list.splice(index, 1)
                })
            } else {
                if (this.data.list.length - 1 === index) {
                    if (index === 0) {
                        this.selectWidget = {}
                    } else {
                        this.selectWidget = this.data.list[index - 1]
                    }
                } else {
                    this.selectWidget = this.data.list[index + 1]
                }

                this.$nextTick(() => {
                    this.data.list.splice(index, 1)
                })
            }
        },
        handleWidgetClone(index) {
            if (this.isGrid) {
                let cloneData = {
                    ...this.data.list[this.fIndex].list[index],
                    options: { ...this.data.list[this.fIndex].list[index].options },
                    key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
                }

                if (this.data.list[this.fIndex].list[index].type === 'radio' || this.data.list[this.fIndex].list[index].type === 'checkbox') {
                    cloneData = {
                        ...cloneData,
                        options: {
                            ...cloneData.options,
                            options: cloneData.options.options.map(item => ({ ...item }))
                        }
                    }
                }
                if (this.data.list[this.fIndex].list[index].type === 'img' || this.data.list[this.fIndex].list[index].type === 'title') {
                    cloneData = {
                        ...cloneData,
                        options: {
                            ...cloneData.options,
                            style: { ...this.data.list[this.fIndex].list[index].options.style }
                        }
                    }
                }
                this.data.list = deepClone(this.data.list)
                this.data.list[this.fIndex].list.splice(index, 0, cloneData)

                this.$nextTick(() => {
                    this.selectWidget = this.data.list[this.fIndex].list[index + 1]
                })
            } else {
                let cloneData = {
                    ...this.data.list[index],
                    options: { ...this.data.list[index].options },
                    key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
                }

                if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
                    cloneData = {
                        ...cloneData,
                        options: {
                            ...cloneData.options,
                            options: cloneData.options.options.map(item => ({ ...item }))
                        }
                    }
                }
                if (this.data.list[index].type === 'img' || this.data.list[index].type === 'title') {
                    cloneData = {
                        ...cloneData,
                        options: {
                            ...cloneData.options,
                            style: { ...this.data.list[index].options.style }
                        }
                    }
                }
                this.data.list = deepClone(this.data.list)
                this.data.list.splice(index, 0, cloneData)

                this.$nextTick(() => {
                    this.selectWidget = this.data.list[index + 1]
                })
            }
        }
    }
}
</script>
